{extend name='admin@main'}

{block name="content"}
<div class="think-box-shadow">

    <table class="layui-table margin-top-10" lay-skin="line">
        {notempty name='list'}
        <thead>
        <tr>
            <th class='list-table-check-td think-checkbox'>
                <input data-auto-none data-check-target='.list-check-box' type='checkbox'>
            </th>
            <th class='text-left nowrap'>套餐信息</th>

            <th class='text-left nowrap'>项目信息</th>

            <th class='text-left nowrap'>检测图片</th>


            <th class='text-left nowrap'>操作</th>


        </tr>
        </thead>
        {/notempty}
        <tbody>
        {foreach $list as $key=>$vo}
        <tr>
            <td class='list-table-check-td think-checkbox'>
                <label><input class="list-check-box" value='{$vo.id}' type='checkbox'></label>
            </td>

            <td class='text-left nowrap'>{$vo.package.title}</td>

           <td class='text-left'>
                <?php foreach($vo['project'] as $k =>&$v){ ?>
                <div style="font-weight: bold">
                    {$k+1}、项目名称：{$v.title}
                </div>
                <?php }?>
            </td>

            <td class='text-left nowrap'>
                {notempty name='vo.report_image'}
                <img data-tips-image style="width:60px;height:60px;vertical-align:top" src="{$vo.report_image|default=''}" class="margin-right-5">
                {/notempty}

                <div style="margin-top:15px"><?php if($vo['file_time']){ echo '上传时间:'.$vo['file_time']; } ?></div>
            </td>


            <td class='text-left'>
                <input type="file" id="file{$vo.id}" class="file" name="files[]" data-id="{$vo.id}">
                <div class="preview{$vo.id}"></div>
                <button onclick="queding123('{$vo.id}')" style="display: none">确定</button>
            </td>

        </tr>
        {/foreach}

        </tbody>

        <script>
            $(".file").change(function () {
                var val = $(this).attr("data-id");
                console.log($(this).val())
                var files = this.files[0]

                if (files) {
                    var reader = new FileReader(); // 创建FileReader对象
                    reader.onload = function(e) {
                        var img = $('<img>', { src: e.target.result, alt: '预览图片' }); // 创建img元素并设置src为读取的结果
                        $('.preview'+val).html(img); // 将img元素添加到预览区域
                    };
                    reader.readAsDataURL(files); // 读取文件内容作为DataURL

                    var formData = new FormData();
                    var fileInput = $(this)[0]; // 获取DOM元素
                    var file = fileInput.files[0]; // 获取文件对象
                    formData.append('image', file); // 将文件添加到FormData对象中
                    formData.append('id', val);
                    $.ajax({
                        url: "<?php echo url('store/order_pay/files');?>",
                        type: 'POST',
                        data: formData,
                        processData: false,  // 告诉jQuery不要处理发送的数据
                        contentType: false,  // 告诉jQuery不要设置Content-Type请求头
                        success: function(response) {
                            console.log('上传成功', response);
                            alert("上传成功")
                            window.location.reload()
                        },
                        error: function(error) {
                            console.error('上传失败', error);
                        }
                    })

                }


            })

            function queding123(id) {
                console.log(id)
            }
        </script>
    </table>
    {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
</div>
{/block}

